<template>
    <div class="walletdetail">
        <backzj />
        <div class="zweei"></div>
        <div class="balance">可用余额<span>43645</span>元</div>
        <div class="walletlist">
            <div class="left">
                <div class="walletlist-name">余额支付</div>
                <div class="walletlist-content">3346546758756</div>
                <div class="walletlist-time">2012-32-34 12:00:00</div>
            </div>
            <div class="right">+4</div>
        </div>
        <div class="walletlist">
            <div class="left">
                <div class="walletlist-name">余额支付</div>
                <div class="walletlist-content">3346546758756</div>
                <div class="walletlist-time">2012-32-34 12:00:00</div>
            </div>
            <div class="right" :class="{'right1':aa}">{{aa==0?'-4':'+4'}}</div>
        </div>
        <div class="walletlist">
            <div class="left">
                <div class="walletlist-name">余额支付</div>
                <div class="walletlist-content">3346546758756</div>
                <div class="walletlist-time">2012-32-34 12:00:00</div>
            </div>
            <div class="right">+455555</div>
        </div>
        <div class="walletlist">
            <div class="left">
                <div class="walletlist-name">余额支付</div>
                <div class="walletlist-content">3346546758756</div>
                <div class="walletlist-time">2012-32-34 12:00:00</div>
            </div>
            <div class="right">+4</div>
        </div>
        <div class="walletlist">
            <div class="left">
                <div class="walletlist-name">余额支付</div>
                <div class="walletlist-content">3346546758756</div>
                <div class="walletlist-time">2012-32-34 12:00:00</div>
            </div>
            <div class="right">+4</div>
        </div>
    </div>
</template>

<script>
import backzj from '../components/backzj.vue'
export default {
  components: { backzj },
    data() {
        return {
            aa:1
        }
    },
}
</script>

<style scoped>
.zweei{
    width: 100%;
    height: 44px;
}
.balance{
  width: 92%;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  text-align: right;
  border-bottom: solid 1px #e5e5e5;
  color: #333;
}
.balance span{
  padding: 0 6px;
  color: #136fe6;
}
.walletlist{
  width: 92%;
  height: 85px;
  border-bottom: solid 1px #e5e5e5;
  margin: 4px auto;
  padding: 5px 0;
  display: flex;
  align-items: center;
}
.left{
    width: 78%;
    display: flex;
    flex-direction: column;
}
.walletlist-name{
  height: 28px;line-height: 28px;
  margin-top: 5px;
  font-weight: 580;
  font-size: 15px;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

}
.walletlist-content{
  width: 90%;
  height: 28px;line-height: 28px;
  margin-top: 5px;
  font-size: 15px;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  
}
.walletlist-time{
  font-size: 14px;
  color: #999;
}
.right{
    width: 20%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.right1{
    width: 20%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #136fe6;
}
</style>